<template>
  <div class="box"> 
      <div class="head clearfix">
          <img v-if="userInfo.head_img" :src='$axios.default.baseURL + userInfo.head_img' alt="">
          <img v-else src="../../public/images/2.jpg" alt="">
          <div class="name">
              <p class="iconfont icon-xingbie-nan">火星网友</p>
              <span>2019-10-10</span>
          </div>
          <a href="#" class="iconfont icon-xiangzuo"></a>
      </div>
      <personBar text1="我的关注" text2="关注的用户" @handle="$router.push('/gz')"></personBar>
      <personBar text1="我的跟贴" text2="跟帖/回复"></personBar>
      <personBar text1="我的收藏" text2="文章/视频"></personBar>
      <personBar text1="设置" text2=""></personBar>
      <personBar text1="退出" text2="" @handle="logout"></personBar>
  </div>
</template>

<script>
import personBar from '../components/personBar'
export default {
    components:{
        personBar
    },
    data() {
        return {
            userInfo:{}
        }
    },
    methods:{
        logout:function() {
            localStorage.removeItem('token')
            localStorage.removeItem('userId')
            this.$router.replace('/')
        }
    },
    //一进页面请求数据渲染，可以在created或mounted
    created() {
        this.$axios({
            url:"http://liangwei.tech:3000/user/"+localStorage.getItem("userId"),
            headers:{
                Authorization:'Bearer '+localStorage.getItem('token')
            }
        }).then(res=>{
            console.log(res);
            const {statusCode} = res.data
            if (statusCode == 401) {
                localStorage.removeItem('token')
                localStorage.removeItem('userId')
                this.$router.replace('/')
            }else {
                this.userInfo = res.data.data
                console.log(this.userInfo);
                
            }
        })
    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
.clearfix::before ,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom:1;
}
.box {
    width: 100vw;
    margin: auto;
    .head {
        width: 100%;
        padding-right:20/3.6vw;
        border-bottom: 5/3.6vw solid #e4e4e4;
        img {
            display: block;
            float: left;
            width: 50/3.6vw;
            height:50/3.64vw;
            margin: 25/6.4vh 10/3.6vw 25/6.4vh 20/3.6vw;
            border-radius: 50%;
        }
        .name {
            float: left;
            margin-top: 30/6.4vh;
            font-size: 16/3.6vw;
            .icon-xingbie-nan {
                margin-bottom: 10/6.4vh;
                  font-size: 16/3.6vw;
                &::before {
                    display: inline-block;
                    margin-right: 6/3.6vw ;
                    color: #7ebdec;
                }
            }
        }
        a {
            float: right;
            height: 100/6.4vh;
            line-height: 100/6.4vh;
            font-size: 20/3.6vw;
        }
    }
}
</style>